<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>学习计划菜单</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .header {
      width: 100%;
      margin: auto;
      /* background-color:rgba(0,0,0,0.3) ; */
    }

    .logo img {
      width: 150px;
      margin: 20px 20px 0 20px;
    }

    .tou {
      width: 1000px;
      /* background-color: pink; */
      overflow: hidden;
      margin: auto;
    }

    .tou a {
      text-decoration: none;
      color: black;
      float: left;
      font-size: 20px;
    }

    .tou li {
      width: 130px;
      height: 96px;
      float: left;
      list-style: none;
      padding: 15px;
      margin-top: 20px;
      box-sizing: border-box;
    }
  
    .center img{
      width: 230px;
    height: 150px;
    float: left;
    margin-top: 25px;
    margin-left: 16px;
    }
    .zhang{
      width: 953px;
    height: 200px;
    /* border: 1px solid red; */
    float: left;
    margin-top: 10px;
    background-color: #ffffff;
    /* margin-left: 100px; */
    }
    .zhang div{
      display: flex;
    width: 670px;
    overflow: hidden;
    flex-direction: column;
    margin-left: 25px;
    float: left;
    }
    .zhang p {
      font-size: 18px;
      margin-top: 35px;
    }
    .zhang .time{
      margin-top: 11px ;
      color: #c9c9c9;
    }
    .zhang button {
      width: 88px;
      height: 40px;
      margin-top: 36px;
      border-radius: 5px;
      border :1px solid #e3f0fc;
      color: #7db4fe;
      background-color: #e3f0fc;
    }
  </style>
</head>

<body>
  <div class="bj">
    <div class="header">
      <div class="tou">
        <a href="./azhang.html" class="logo"><img src="./img/logo.png"></a>
        <ul>
          <li>
            <a href="./index.html">首页</a>
          </li>
          <li>
            <a href="./ajie.html">计划内容</a>
          </li>
          <li>
            <a href="./aboke.html">博客</a>
          <li>
            <a href="./ashipin.html">视频</a>
          </li>
          <li>
            <a href="./axiazai.html">下载</a>
          </li>
        </ul>
        <hr>
      </div>
    </div>
    <div class="center">
    <hr>
      <ul id="booklist">
        <li class="zhang">
          <a href="#"><img src="./img/01.jpg"></a>
          <div>
            <p>WEB第一期学习计划</p>
            <p class="time">2021-06-29T16:00:00.000Z</p>
            <button>阅读</button>
          </div>
        </li>
      </ul>
</body>
<script>
  //1.获取元素
  var booklist = document.getElementById('booklist');
  //2.写ajax函数，并且不需要交互调用，页面刷新是直接调用
  function ajax() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          var result = JSON.parse(xhr.responseText);
          console.log(result);
          //调用显示用的函数showlist
          showlist(result.data);
        } else {
          console.log('数据返回错误');
        }
      }
    }
    xhr.open('GET', '/admin/azhang', true);
    xhr.send();
  }
  //3.调用ajax函数
  ajax();
  //4.创建用于遍历数据显示的showlist函数
  function showlist(arr) {
    for(var j=0;j<arr.length;j++){
           var time=new Date(arr[j].btime);   
          arr[j].btime=time.toLocaleDateString().replace(/\//g, '-'); 
    };
    // console.log(arr);
    //空字符
    var str = '';
    //遍历
    for (var i = 0; i < arr.length; i++) {
      str += 
      ` 
        <li class="zhang">
          <a href="#"><img src="./img/0${arr[i].id}.jpg"></a>
          <div>
            <p>${arr[i].title}</p>
            <p class="time">${arr[i].btime}</p>
            <button>阅读</button>
          </div>
        </li>
      `
    }
    // 插入到userlist标签中
    booklist.innerHTML = str;
  }
</script>

</html>